<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>progress-arc</title>
    <style>
      #path {
        fill: blue;
        fill-opacity: 0;

        stroke-dasharray: 63;
        stroke-dashoffset: 0;

        transform-origin: 50% 50%;
        transform: scaleX(-1);
      }
    </style>
  </head>
  <body>
    <div>
      <input
        type="range"
        name="range"
        id="range"
        min="0"
        value="0"
        max="63"
        step="0.63"
      />
      <input type="number" name="number" id="number" value="0" max="63" />
      <p id="progress">0</p>
    </div>

    <svg
      width="300"
      height="300"
      viewBox="0 0 100 100"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" fill="white" />
      <path
        d="M30 50 A20 20 0 0 1 70 50"
        fill="none"
        stroke="blue"
        stroke-width="0.85"
      />
      <path
        id="path"
        d="M30 50 A20 20 0 0 1 70 50"
        fill="none"
        stroke="white"
        stroke-width="1"
      />
      <text
        id="text"
        x="50"
        y="50"
        dy="-5"
        text-anchor="middle"
        style="font-size: 0.5em"
      >
        0%
      </text>
    </svg>
    <script>
      window.onload = function () {
        var range = document.getElementById("range"),
          number = document.getElementById("number"),
          progress = document.getElementById("progress"),
          path = document.getElementById("path"),
          text = document.getElementById("text");

        range.oninput = function () {
          number.value = this.value;
          progress.innerHTML = this.value;
          text.textContent = Math.round((this.value / 63) * 100) + "%";
          path.style.strokeDashoffset = this.value;
          path.style.fillOpacity = this.value / 63;
          if (Math.round((this.value / 63) * 100) > 50) {
            text.style.fill = "white";
          } else {
            text.style.fill = "";
          }
        };
      };
    </script>
  </body>
</html>
